<template>
  <div>
    <el-card v-for="(item, index) in oderList" :key="index">
      <div slot="header" class="clearfix oder-header">
        <img :src="require('@/assets/icon/user/订单图标.png')" alt="" />
        <span class="oder-number"> 订单编号: {{ item.orderId }}</span>
        <span class="oder-time"
          >{{ item.createTime.split("T")[0] }}
          {{ item.createTime.split("T")[1] }}</span
        >
      </div>
      <div class="oder-container">
        <div class="course-list">
          <div
            class="course-container"
            v-for="(each, i) in item.courseInfos"
            :key="i"
          >
            <img :src="each.image" alt="" />
            <div class="course-info">
              <div class="course-name">{{ each.courseName }}</div>
              <div class="course-value">¥{{ each.price }}</div>
            </div>
          </div>
        </div>
        <div class="oder-all-value">¥{{ item.total }}</div>
        <div class="oder-status">{{ item.orderStatus }}</div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getOrder } from "@/services/user";
export default {
  data() {
    return {
      oderList: [],
    };
  },
  methods: {
    getOderList() {
      getOrder().then((res) => {
        this.oderList = res.data.data ? res.data.data.reverse() : [];
      });
    },
  },
  created() {
    this.getOderList();
  },
};
</script>
<style lang="scss" scoped>
.el-card {
  padding: 32px;
  margin-bottom: 25px;
  ::v-deep .el-card__header {
    border-bottom: 1px solid #b7bbbf;
    padding: 0;
    padding-bottom: 19px;
    .oder-header {
      display: flex;
      font-size: 12px;
      align-items: center;
      img {
        width: 14px;
        height: 14px;
        margin-right: 10px;
      }
      > span {
        margin-right: 30px;
        &:first-of-type {
          font-weight: bold;
          color: #4d555d;
        }
        &:last-child {
          color: #93999f;
        }
      }
    }
  }
  ::v-deep .el-card__body {
    padding: 0;
    .oder-container {
      display: flex;
      margin-top: 25px;
      .course-list {
        flex: 1;
        border-right: 1px solid #d9dde1;
        .course-container {
          display: flex;
          margin-top: 24px;
          padding-top: 24px;
          border-top: 1px solid #d9dde1;

          &:first-child {
            margin-top: 0;
            padding-top: 0;
            border-top: 0;
          }
          img {
            width: 160px;
            margin-right: 16px;
          }
          .course-info {
            display: flex;
            flex-direction: column;
            font-size: 14px;
            > div {
              margin-bottom: 10px;
              &:last-child {
                color: #f01414;
                font-size: 12px;
              }
            }
          }
        }
      }
      .oder-all-value {
        padding-top: 36px;
        width: 250px;
        border-right: 1px solid #d9dde1;
        text-align: center;
        color: #f01414;
      }
      .oder-status {
        padding-top: 36px;
        text-align: center;
        width: 200px;
        color: #93999f;
        font-size: 14px;
      }
    }
  }
}
</style>